<template>
	<view class="i-lineRow" @click.stop="handleClick">
		<view class="line_item" :style="{padding, borderBottom: border, backgroundColor}">
			<view class="line_left">
				<text v-if="title">{{title}}</text>
				<slot v-else name="left"></slot>
			</view>
			<view class="line_right">
				<slot v-if="diyRight" name="right"></slot>
				<view class="goto" v-else>
					<text>{{rightText}}</text>
					<image src="../../static/images/goto_icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	import _ from 'lodash'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		diyRight: {
			type: [String, Boolean],
			default: false
		},
		padding: {
			type: String,
			default: '32rpx'
		},
		border: {
			type: String,
			default: '1rpx solid #f3f4f5'
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		rightText: {
			type: String,
			default: ''
		}
	})
	const emit = defineEmits([
		'click'
	])
	const click = () => {
		emit('click')
	}
	const handleClick = _.debounce(click, 500, { leading: true, trailing: false })
</script>

<style lang="scss" scoped>
	.i-lineRow {
		width: 100%;

		.line_item {
			@include flexRS;
			padding-left: 0;
		}

		.line_left {
			@include titlefont(28rpx);
		}

		.line_right {
			@include flexR;
			
		}

    .goto {
			width: 100%;
			text-align: right;
			text {
				font-size: 24rpx;
				color: #999;
				margin-right: 4rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
				flex-grow: 0;
				flex: 1;
			}
		}
	}

	.i-lineRow:active {
		background-color: rgba(243, 244, 245, 0.3);
	}
</style>